<taglib name="html" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <TITLE>ThinkPHP示例：Ajax表单提交</TITLE>
<link rel='stylesheet' type='text/css' href='__PUBLIC__/Css/common.css'>
<html:import type="js" file="Js.Base" /> 
<html:import type="js" file="Js.prototype" /> 
<html:import type="js" file="Js.mootools" /> 
<html:import type="js" file="Js.Ajax.ThinkAjax" /> 
<html:import type="js" file="Js.Form.CheckForm" /> 
 </HEAD>
 <BODY><SCRIPT LANGUAGE="JavaScript">
 <!--
	function add(){
		ThinkAjax.sendForm('form1','__URL__/insert',complete,'result');
	}

	function complete(data,status){
		if (status==1)
		{
		// 更新列表
		$('list').innerHTML += 
		'<div class="result" style=\'font-weight:normal;background:#A6FF4D\'><div style="border-bottom:1px dotted silver">'+data.title+'  ['+data.email+data.create_time+']</div><div class="content">'+data.content+'</div></div>';
		}
	}
	function checkTitle(){
		ThinkAjax.send('__URL__/checkTitle','ajax=1&title='+$('title').value,'','result');
	}
 //-->
 </SCRIPT>
 <div class="main">
 <H2>ThinkPHP示例之：Ajax表单提交</H2>
本示例同表单处理，只是改变提示方式为Ajax方式，采用了ThinkAjax类库实现。其他Ajax类库的实现方式类似~

   <FORM id="form1" METHOD=POST ACTION="__URL__/insert">
 <TABLE cellpadding=2 cellspacing=2>
  <TR>
	<TD colspan="2"><div id="result" class="none result" style="font-family:微软雅黑,Tahoma;letter-spacing:2px"></div></TD>
 </TR>

 <TR>
	<TD class="tRight" width="12%">标题：</TD>
	<TD class="tLeft" ><INPUT TYPE="text" NAME="title" id="title" style="height:23px" class="large bLeft"> <INPUT TYPE="button" value="检 查" class="small button" onclick="checkTitle()"></TD>
 </TR>
  <TR>
	<TD class="tRight" >邮箱：</TD>
	<TD class="tLeft" ><INPUT TYPE="text" NAME="email" style="height:23px" class="huge bLeft"></TD>
 </TR>
 <TR>
	<TD class="tRight tTop" >内容：</TD>
	<TD><TEXTAREA NAME="content" class="huge bLeft" ROWS="8" COLS="25"></TEXTAREA></TD>
 </TR>
  <TR>
	<TD class="tRight tTop" ></TD>
	<TD><INPUT TYPE="text" NAME="verify" style="height:23px" class="small" > <img src="__URL__/verify" align="absmiddle" /> 输入对应的数字</TD>
 </TR>
 <TR>
	<TD><INPUT TYPE="hidden" NAME="ajax" value="1"></TD>
	<TD><INPUT TYPE="button" onclick="add()" class="button" value="提 交"> <INPUT TYPE="reset" class="button" value="清 空"></TD>
 </TR>

 <TR>
 <TD></TD>
	<TD ><HR></TD>
 </TR>
  <TR>
  <TD></TD>
	<TD > <div id="list" >
	<volist name="list" id="vo"><div class="result" style='font-weight:normal;<eq name="odd" value="1">background:#ECECFF</eq>'><div style="border-bottom:1px dotted silver">{$vo.title}  [{$vo.email} {$vo.create_time|date='Y-m-d H:i:s',###}]</div>
	<div class="content">{$vo.content|nl2br}</div></div>
	</volist></div></TD>
  </TR>
 <TR>
 <TD></TD>
	<TD ><HR> 示例源码<BR>控制器IndexAction类<BR><php>highlight_file(LIB_PATH.'Action/IndexAction.class.php');</php><BR>模型FormModel类<BR><php>highlight_file(LIB_PATH.'Model/FormModel.class.php');</php></TD>
 </TR>
 </TABLE>
   </FORM>
</div>
 </BODY>
</HTML>
